<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />

  <title>The fifth page</title>

  <link rel="stylesheet" href="../css/blog.css" />
  <link rel="stylesheet" href="../css/loader-ellips.css" />

</head>
<body>

<div class="site-header">
  <div class="container">

    <h1>Blog page 5</h1>

  </div>
</div>

<div class="container">
<article class="post">
  <a class="post-header" href="/blog/flickity-takes-the-field">
    <h1 class="post-header__title">Flickity takes The Field</h1>
    <p class="post-header__date">17 Dec 2015</p>
  </a>
  <div class="post__content">
<p><a href="http://www.thefieldmag.com/"><em>The Field</em></a> is a new outdoor lifestyle publication, or as founder Chris Stillitano puts it, &quot;<em>The Field</em> is a place for good design and the great outdoors.&quot; It&#39;s also a great place to see Flickity in use.</p>
<p><em>The Field</em>&#39;s beautiful photo galleries are made with <a href="https://flickity.metafizzy.co/">Flickity</a>. It&#39;s great to see how they&#39;ve taken advantage of Flickity&#39;s <a href="https://flickity.metafizzy.co/style.html#previous-next-buttons">customizable previous &amp; buttons</a> to minimally style and position them. The slide counters change <a href="https://flickity.metafizzy.co/api.html#cellselect">on <code>cellSelect</code></a>.</p>
<div class="fit-video">
  <iframe src="https://vid.me/e/opMu?muted=1" width="740" height="480" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen scrolling="no"></iframe>
</div>

<p>The site has a keen design sense, utilizing different layouts for its various content types. So much care went into these photo galleries. Watch how images resize and center while resizing the browser, even with images of varying aspect ratios.</p>
<div class="fit-video">
  <iframe src="https://vid.me/e/LIHQ?muted=1" width="806" height="480" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen scrolling="no"></iframe>
</div>

  </div>
</article>
<article class="post">
  <a class="post-header" href="/blog/fizzy-bear-branded">
    <h1 class="post-header__title">Fizzy bear branded</h1>
    <p class="post-header__date">1 Dec 2015</p>
  </a>
  <div class="post__content">
<p>Fizzy&#39;s got a brand new brand.</p>
<p><img src="https://i.imgur.com/T0sVgzD.png" alt="Metafizzy brand"></p>
<p><a href="/blog/logotype-james-edmondson">The previous logotype was a beaut</a> and served Metafizzy well. But it did have some issues (No fault of James&#39; — these issues were all self-inflicted as I requested).</p>
<ul>
<li>Legibility trouble: People would read &quot;Meta fuzzy&quot; or worse &quot;Meta furry&quot;</li>
<li>The two line treatment led to people spelling the name as two words &quot;Meta Fizzy&quot;</li>
<li>It did not reduce well. It didn&#39;t hold up at small sizes, like a Twitter avatar or favicon</li>
</ul>

  </div>
</article>


  <nav class="pagination">
      <a class="pagination__previous" href="/blog/page4">Previous &middot; 4</a>
    <span class="pagination__current">Page 5 of 17</span>
      <a class="pagination__next" href="6.html">Next &middot; 6</a>
  </nav>

</div>

<footer class="site-footer">
  <div class="container">
    <p class="site-footer__fizzy-makes">Metafizzy makes delightful UI libraries and logos</p>
  </div>
</footer>

<script src="../../node_modules/ev-emitter/ev-emitter.js"></script>
<script src="../../node_modules/fizzy-ui-utils/utils.js"></script>
<script src="../../js/core.js"></script>
<script src="../../js/scroll-watch.js"></script>
<script src="../../js/page-load.js"></script>
<script src="../../js/history.js"></script>
<script src="../js/scroll-loader.js"></script>

</body>
</html>
